<template>
  <div>
    <a-row :gutter="24">

      <a-spin :style=" spinning ? `top: 300px;left: 50%;position: fixed;z-index: 10000;` : `display:none;` " />

      <a-col style="padding: 0px 0px;padding-left:6px;padding-right:0px;" :xl="4" :lg="24" :md="24" :sm="24">
        <a-card :loading="loading" title="博客管理" :bordered="false" style="margin-top:0px;margin-bottom:20px;display:none;">
          <div class="members">
            <a-row>
              <a-col :span="24" v-for="(item, index) in manage" :key="index">
                <a :href="item.href">
                  <a-avatar size="small" :src="item.avatar" />
                  <span class="member" @click="item.click">{{ item.name }}</span>
                </a>
              </a-col>
            </a-row>
          </div>
        </a-card>

        <a-card :loading="loading" title="统计管理" :bordered="false" style="margin-top:20px;display:none;">
          <div class="members">
            <a-row>
              <a-col :span="24" v-for="(item, index) in count" :key="index">
                <a :href="item.href">
                  <a-avatar size="small" :src="item.avatar" />
                  <span class="member">{{ item.name }}</span>
                </a>
              </a-col>
            </a-row>
          </div>
        </a-card>

        <div class="recommended-authors">
          <div class="title">
            <span style="color: #333;">🎖️ 作者榜</span>
          </div>
          <ul class="list">
              
            <li class="item" :key="index" v-for=" (item , index) in newAuthors ">
              <div class="link">
                <a @click="$router.push(`/account/author/${item.username}`)" target="_blank" class="recommended-avatar" :style="`background-image: url(${item.avatar});`"></a>
                <div class="user-info">
                  <a @click="$router.push(`/account/author/${item.username}`)" target="_blank" class="username">{{item.realname}}</a>
                  <a target="_blank" class="rank">
                    <img :src="`https://cdn.jsdelivr.net/gh/Miazzy/yunwisdoms@v3.0.0/images/${item.level}.svg`">
                  </a>
                  <div class="position"></div>
                  <div class="description">{{item.bio}}</div>
                </div>
              </div>
            </li>
            
            <li class="item">
              <a @click="$router.push(`/account/authors/index`);" target="_blank" class="more">
                <span>完整榜单</span>
                <i class="fa fa-angle-right" style="font-size: 16px;"></i>
              </a>
            </li>
          </ul>
        </div>

        <div class="sidebar-block related-entry-sidebar-block shadow" st:block="relatedEntrySidebarBlock">
          <div class="block-title">🔥  最新文章</div>
          <div class="block-body">
            <div class="entry-list" :key="index" v-for="(item , index) in newBlogData ">
              <a @click="handleBlogView(item)" target="_blank" rel="" st:name="link" class="item" >
                <div class="entry-title" style="cursor: pointer;"><a>{{item.title}}</a></div>
                <div class="entry-meta-box">
                  <div class="entry-meta"><img src="//cdn.jsdelivr.net/gh/Miazzy/yunwisdoms@v3.0.0/images/zan.svg" class="icon"><span class="count">{{item.star}}</span></div>
                  <div class="entry-meta"><img src="//cdn.jsdelivr.net/gh/Miazzy/yunwisdoms@v3.0.0/images/comment.svg" class="icon"><span class="count">{{item.messages}}</span></div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </a-col>

      <a-col :xl="20" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card v-show="!submitBlogFlag" :loading="loading" title :bordered="false">
          <a-input
            type="text"
            style="width: '100%';border:1px solid #eeeeee;margin-top:0px;margin-bottom:20px;height:42px;background:#fefefe;"
            v-model="pageTitle"
            placeholder="请输入博文标题"
          ></a-input>

          <div id="editor">
            <mavon-editor
              style="height: 720px;width: 100%;"
              ref="md"
              @htmlCode="$htmlCode"
              @imgAdd="$imgAdd"
              @imgDel="$imgDel"
              v-model="article.mdContent"
            ></mavon-editor>
          </div>

          <a-form-item :required="false" style="margin-top:20px;">
            <div style="float:left;margin-right:10px;">文章标签：</div>
            <div>
              <template v-for="(tag, index) in tags">
                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                  <a-tag
                    :key="tag"
                    :closable="true"
                    :index="index"
                    @close="() => handleTagClose(tag)"
                  >{{`${tag.slice(0, 20)}...`}}</a-tag>
                </a-tooltip>
                <a-tag
                  v-else
                  :key="tag"
                  :closable="true"
                  :index="index"
                  @close="() => handleTagClose(tag)"
                >{{tag}}</a-tag>
              </template>
              <a-input
                v-if="tagInputVisible"
                ref="input"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                :value="tagInputValue"
                @change="handleTagInputChange"
                @blur="handleTagInputConfirm"
                @keyup.enter="handleTagInputConfirm"
              />
              <a-tag
                v-else
                @click="handleShowTagInput"
                style="background: #fff; borderStyle: dashed;"
              >
                <a-icon type="plus" />
              </a-tag>
            </div>
          </a-form-item>

          <a-form-item label :required="false">
            <div style="float:left;margin-right:10px;">分类专栏：</div>
            <div style="float:left;margin-right:10px;">
              <a-select defaultValue="社会聚焦" style="width: 180px;" v-model="pageColumn">
                <a-select-option value="社会聚焦">社会聚焦</a-select-option>
                <a-select-option value="科学技术">科学技术</a-select-option>
                <a-select-option value="人工智能">人工智能</a-select-option>
                <a-select-option value="诸子百家">诸子百家</a-select-option>
                <a-select-option value="金融管理">金融管理</a-select-option>
                <a-select-option value="建筑工程">建筑工程</a-select-option>
                <a-select-option value="艺术设计">艺术设计</a-select-option>
                <a-select-option value="团队文化">团队文化</a-select-option>
                <a-select-option value="前端开发">前端开发</a-select-option>
                <a-select-option value="Android">Android</a-select-option>
                <a-select-option value="IOS开发">IOS开发</a-select-option>
                <a-select-option value="后端开发">后端开发</a-select-option>
                <a-select-option value="人工智能">人工智能</a-select-option>
                <a-select-option value="问答交流">问答交流</a-select-option>
              </a-select>
            </div>
          </a-form-item>

          <a-form-item :required="false">
            <div style="float:left;margin-right:10px;">文章类型：</div>
            <a-radio-group v-model="pageType">
              <a-radio-button value="Y">原创</a-radio-button>
              <a-radio-button value="F">翻译</a-radio-button>
              <a-radio-button value="Z">转载</a-radio-button>
            </a-radio-group>
          </a-form-item>

          <a-form-item :required="false">
            <div style="float:left;margin-right:10px;">发布形式：</div>
            <div>
              <a-radio-group v-model="pageScope">
                <a-radio :value="1">公开</a-radio>
                <a-radio :value="2">私密</a-radio>
                <a-radio :value="3">粉丝可见</a-radio>
              </a-radio-group>
            </div>
          </a-form-item>

          <a-form-item>
            <div style="float:left;margin-right:10px;">附件上传：</div>
            <j-upload v-model="pageFile"></j-upload>
          </a-form-item>

          <div style="width:88%;margin-top:10px;">
            <a-button
              type="primary"
              style="margin-right:10px;margin-top:10px;border: 1px solid #fefefe;"
              @click="handleSubmitBlog()"
            >发布博文</a-button>
            <a-button
              type="primary"
              style="margin-right:10px;margin-top:10px;border: 1px solid #fefefe;"
              @click="handleSubmitDraft()"
            >保存草稿</a-button>
          </div>
        </a-card>
        <a-card v-show="submitBlogFlag" :loading="loading" title :bordered="false">
          <div class="result">
            <div>
              <a-icon :class="['success','icon']" type="check-circle" style="margin-left:45%" />
            </div>
            <div class="title" style="margin-left:42%">博文提交成功！</div>
            <div class="description">{{ content }}</div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>

import { timeFix, welcome } from "@/utils/util";
import { ACCESS_TOKEN } from "@/store/mutation-types";

import PageLayout from "@/components/page/PageLayout";
import JUpload from "@/components/jeecg/JUpload";

import * as manageAPI from "@/api/manage";
import * as tools from "@/utils/util";
import * as authortool from "@/api/blogAPI/author";
import * as segmenttool from "@/api/blogAPI/segment";
import * as hashtoken from "@/api/hashToken/hashtoken";
import * as storage from "@/utils/storage";

export default {
  name: "BlogCenter",
  components: {
    PageLayout,
    JUpload
  },
  data() {
    return {
      timeFix: timeFix(),
      welcome: welcome(),
      postName: "",
      departName: "",
      avatar: "",
      user: {},
      welcomeStyle: {},
      postStyle: {
        "margin-top": "-5px",
        "margin-left": "-113px",
        flex: "auto",
        position: "absolute",
        left: "90px",
        transform: "scale(0.8)"
      },
      markdownOption: {
        editable: true
      },
      projects: [],
      loading: true,
      radarLoading: true,
      activities: [],
      nodelist: [],
      teams: [],
      newBlogData:[],
      article: {
        id: "-1",
        dynamicTags: [],
        title: "",
        mdContent: "",
        cid: ""
      },
      count: [],
      manage: [
        {
          name: "发布博客",
          avatar:
            "//cdn.jsdelivr.net/gh/Miazzy/yunwisdom_cdn@v1.0.0/images/icon-publish-01.svg",
          click: async () => {
            //跳转到博客中心
            this.$router.push(`/blog/center`);
          }
        },
        {
          name: "文章管理",
          avatar:
            "//cdn.jsdelivr.net/gh/Miazzy/yunwisdom_cdn@v1.0.0/images/icon-manage-02.svg",
          click: async () => {
            //跳转到博客中心 -> 文章列表
            this.$router.push(`/blog/centerlist`);
          }
        },
        {
          name: "评论管理",
          avatar:
            "//cdn.jsdelivr.net/gh/Miazzy/yunwisdom_cdn@v1.0.0/images/icon-comment-03.svg",
          click: async () => {}
        },
        {
          name: "专栏管理",
          avatar:
            "//cdn.jsdelivr.net/gh/Miazzy/yunwisdom_cdn@v1.0.0/images/icon-column-01.svg",
          click: async () => {}
        }
      ],
      blog: [],
      news: [],
      axisData: [],
      newAuthors:[],
      radarData: [],
      pageTitle: "",
      pageType: "Y",
      pageScope: 1,
      pageFile: "",
      pageColumn: "社会聚焦",
      tags: [],
      content: '',
      spinning:false,
      submitBlogFlag:false,
      tagInputVisible: false,
      tagInputValue: ""
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    }
  },
  async created() {
    this.user = this.userInfo;

    //设置岗位style
    this.handlePostStyle();

    //设置员工岗位信息/部门信息
    try {
      this.v_user = await manageAPI.queryUserInfoByView(this.user.username);

      this.postName = this.v_user[0]["post"];
      this.departName = this.v_user[0]["name"];

      this.address = this.v_user[0]["address"];
      this.bio = this.v_user[0]["bio"];

      //设置头像信息
      this.avatar =
        window._CONFIG["uploadURL"] + "/" + this.v_user[0]["avatar"];

      //加载最新5篇博文
      this.newBlogData = await manageAPI.queryBlogInfo(0 , 5);

      //加载作者排行榜
      this.newAuthors = await authortool.queryAuthorRank(0, 3, storage , tools);

      console.log("this.avatar :" + this.avatar);
    } catch (error) {
      console.log("工作台设置员工岗位信息/部门信息异常：" + error);
    }

    //获取动态数据，并设置到动态列表中
    try {
      this.nodelist = await manageAPI.queryDynamic();
    } catch (error) {
      console.log(error);
    }

    //获取最新博文数据
    try {
      this.news = await manageAPI.queryBlogInfoNew(0, 5);
    } catch (error) {
      console.error(error);
    }

    console.log("动态信息：" + JSON.stringify(this.nodelist));
  },
  mounted() {
    this.handlePostStyle();
    this.handleBlog().then(() => null);
    this.loading = false;
  },
  methods: {
    ...Vuex.mapGetters(["nickname", "welcome"]),

    /**
     * @function 处理博文详情信息
     */
    async handleBlog() {
      try {
        //获取本篇博文编号信息
        var id = tools.queryUrlString("id");

        //如果编号不为空，则获取博文详情
        if (!tools.isNull(id)) {
          //获取本篇文章作者信息
          this.author = tools.queryUrlString("author");

          //获取本篇文章标签信息
          this.tags = tools.queryUrlString("tags");

          //获取博文内容信息
          this.blogInfo = await manageAPI.queryTableData("bs_blog", id);

          //设置博文内容信息
          this.article.mdContent = this.blogInfo["content"];

          //设置博文标题信息
          this.pageTitle = this.blogInfo["blog_title"];

          //设置标签信息
          this.tags = tools.deNull(this.blogInfo["page_tags"]).split(",");

          //设置分类专栏
          this.pageColumn =
            tools.deNull(this.blogInfo["page_column"]) || "社会聚焦";

          //设置文章类型
          this.pageType = tools.deNull(this.blogInfo["page_type"]);

          //设置发布形式
          this.pageScope = tools.deNull(this.blogInfo["page_scope"]);
        }
      } catch (error) {
        console.log(error);
      }
      //返回博文内容
      return this.article.mdContent;
    },

    /**
     * @function markdown编辑器显示html内容
     */
    $htmlCode(status, content) {
      //设置文章对应的html内容
      this.article.htmlContent = content;
    },
    /**
     * @function markdown编辑器添加图片函数
     */
    $imgAdd(pos, $file) {
      const token = Vue.ls.get(ACCESS_TOKEN);
      //将图片上传到服务器.
      var formdata = new FormData();
      //设置图片上传属性名称
      formdata.append("file", $file);
      try {
        axios({
          url: `${window._CONFIG["uploadURL"]}/jeecg-boot/sys/common/upload`,
          method: "post",
          data: formdata,
          headers: {
            "Content-Type": "multipart/form-data",
            "X-Access-Token": token
          }
        }).then(url => {
          //计算图片服务器地址
          url = `${window._CONFIG["uploadURL"]}/${url.data.message}`;
          //将返回的url替换到文本原位置![...](0) -> ![...](url) $vm.$img2Url 详情见本页末尾
          this.$refs.md.$img2Url(pos, url);
        });
      } catch (error) {
        console.error(error);
      }
    },
    /**
     * @function 设置岗位style
     */
    handlePostStyle() {
      if (this.welcome.length > 76) {
        this.postStyle = { display: "none" };
      }
      //如果字数太多，则使用省略符号
      if (this.welcome.length > 200) {
        this.welcomeStyle = { "font-size": "13px" };
      }
      //如果字数太多，则使用省略符号
      if (this.welcome.length > 250) {
        this.welcomeStyle = { "font-size": "12px" };
      }
      //如果字数太多，则使用省略符号
      if (this.welcome.length > 270) {
        this.welcomeStyle = { "font-size": "12px" };
        this.welcome = this.welcome.substring(0, 270) + "...";
      }
    },
    /**
     * @function 关闭Tag函数
     */
    handleTagClose() {
      const tags = this.tags; //this.tags.filter(tag => tag !== "");
      console.log(tags);
      this.tags = tags;
    },
    /**
     * @function 显示Tag对应输入框函数
     */
    handleShowTagInput() {
      this.tagInputVisible = true;
      this.$nextTick(function() {
        this.$refs.input.focus();
      });
    },
    /**
     * @function 处理Tag对应Input的change事件
     */
    handleTagInputChange(e) {
      this.tagInputValue = e.target.value;
    },
    /**
     * @function 提交Tag函数
     */
    handleTagInputConfirm() {
      const inputValue = this.tagInputValue;
      let tags = this.tags;
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
      }
      console.log(tags);
      Object.assign(this, {
        tags,
        tagInputVisible: false,
        tagInputValue: ""
      });
    },

    /**
     * @function 提交博文函数
     */
    async handleSubmitBlog(result = "", id = "" , flag = 'N' , message = '提交博文成功！' , hashinfo = {}) {

      try {

        //获取博文信息
        var article = {};
        
        try {
          //获取本篇博文编号信息
          id = tools.queryUrlString("id");
        } catch (error) {
          console.error("提交博文：" + error);
        }

        //如果博文标题为空，则提示输入博文标题
        if (tools.isNull(this.pageTitle)) {
          //保存草稿草稿
          this.$message.error("请输入博文标题！");
          //设置返回结果
          return "";
        }

        //如果博文内容为空，则提示输入博文内容
        if (tools.isNull(this.article.mdContent)) {
          //保存草稿草稿
          this.$message.error("请输入博文内容！");
          //设置返回结果
          return "";
        }

        //如果博文标签为空，则提示输入博文标签
        if (tools.isNull(this.tags.toString())) {
          //保存草稿草稿
          this.$message.error("请输入文章标签！");
          //设置返回结果
          return "";
        }

        //显示加载状态
        this.spinning = true;

        //等待100ms以保证spinning状态在dom渲染出来
        await tools.sleep(100);

        article.id = tools.isNull(id) ? tools.queryUniqueID() : id;
        article.blog_title = this.pageTitle;
        article.content = this.article.mdContent;
        article.hontent = this.article.htmlContent;
        article.create_by = this.userInfo.username;
        article.create_time = dayjs().format("YYYY-MM-DD HH:mm:ss");
        article.page_tags = this.tags.toString();
        article.page_column = this.pageColumn;
        article.page_type = this.pageType;
        article.page_scope = this.pageScope;
        article.page_file = this.pageFile;
        article.avatar = this.avatar;
        article.bpm_status = 1;
        article.flag = flag ;

        //对文章标题进行分词处理
        article.segment = segmenttool.analyzer(article.blog_title);
        article.segment = `,${article.segment},`;

        //计算HashKey的值，保证此条记录的合法性
        hashinfo = await hashtoken.calcuHashTokenFast('', '', `${this.userInfo.username}|${article.create_time}|${article.blog_title}|${article.content}`);
        article.hashkey = hashinfo.key;
        article.hashtoken = hashinfo.hash;
        article.consume = hashinfo.consume;

        //提交博文，如果是新增数据，则发布新博文，如果是编辑博文，则保存更新
        if (tools.isNull(id)) {
          result = await manageAPI.postTableData("bs_blog", article);
        } else {
          result = await manageAPI.patchTableData("bs_blog", id, article);
        }

        //保存草稿草稿
        this.$message.warning(message);

        //清空博文参数
        this.pageTitle = "";
        this.article.mdContent = "";
        this.tags = [];
        this.spinning = false;
        this.submitBlogFlag = true;

        //等待5000ms隐藏发布博文成功提示
        await (async () => { this.content = tools.abbreviation(article.content, 300); window.scrollTo(0,0); await tools.sleep(5000); this.submitBlogFlag = false; })();

      } catch (error) {
        //打印异常日志
        console.log(error);
        //保存草稿草稿
        this.$message.warning("提交博文异常，请稍后重试！");
      }

      //返回结果
      return result;
    },

    /**
     * @function 处理博文预览功能
     */
    async handleBlogView(item) {
      try {
        //标签
        var tags = tools.deNull(item.tags);
        //跳转到博文详情页面
        this.$router.push(
          `/blog/view?id=${item.id}&author=${item.create_by}&tags=${tags}`
        );
      } catch (error) {
        console.log("$router go to error :" + error);
      }
    },

    /**
     * @function 提交博文草稿函数
     */
    async handleSubmitDraft(result = "", id = "" , flag = 'Y' , message = '提交博文成功！', hashinfo = {}) {
      //返回结果
      return await this.handleSubmitBlog(result, id, flag, message, hashinfo);
    }
  }
};
</script>

<style lang="scss" scoped>
  a {
    text-decoration: none;
    cursor: pointer;
    color: #606060;
  }

  a:hover { 
    text-decoration: none;
    cursor: pointer;
    color: #1890FF;
  }

  .recommended-books {
    margin-top:20px;
    padding: 0;
  }

  .sidebar-block:not(.pure) {
    background-color: #fff;
  }

  .sidebar-block {
    margin-top: 20px;
    position: relative;
    margin-bottom: 1.5rem;
    border-radius: 2px;
  }

  .sidebar-block:not(.pure) .block-title {
    padding: 1rem 1.3rem;
    font-size: 14px;
    margin-left: 3px;
    color: #333;
    border-bottom: 1px solid hsla(0,0%,58.8%,.1);
  }

  .item {
    display: block;
    cursor: pointer;
    padding: .8rem 1.3rem;
  }

  .entry-title {
    font-size: 1.16rem;
    color: #333;
    cursor: pointer;
  }

  .entry-title:hover { 
    cursor: pointer;
  }

  .entry-meta-box {
    margin-top: .4rem;
  }

  .entry-meta {
    display: inline-block;
    margin-right: 1.5rem;
    font-size: 1.1rem;
    color: #c2c2c2;
  }

  .entry-meta .icon {
    vertical-align: sub;
  }

  .entry-meta .count {
    color: #b2bac2;
    margin-left: .4rem;
  }

  .recommended-authors .title, .recommended-books .title {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid hsla(0,0%,58.8%,.1);
  }

  .recommended-authors, .recommended-books {
      border-radius: 2px;
      overflow: hidden;
      background: #fff;
      margin-bottom: 20px;
      font-size: 13px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }

  .recommended-authors .title, .recommended-books .title {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid hsla(0,0%,58.8%,.1);
  }

  .recommended-authors .title span, .recommended-books .title span {
    font-size: 14px;
    color: #333;
  }

  .recommended-authors .item .link {
    padding: 12px 16px;
    display: flex;
    align-items: center;
  }

  .recommended-authors .recommended-avatar {
    display: inline-block;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .recommended-authors .user-info {
    overflow: hidden;
    text-align: left;
  }

  .recommended-authors .username {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
  }

  .recommended-authors .rank {
    margin-left: 4px;
    vertical-align: middle;
  }

  .recommended-authors .link .description, .recommended-authors .link .position {
    color: #909090;
    font-size: 12px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recommended-authors .link .description, .recommended-authors .link .position {
    color: #909090;
    font-size: 12px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recommended-authors .item .more {
    display: block;
    color: #ea6f5a;
    padding: 12px 0;
    text-align: center;
    border-top: 1px solid hsla(0,0%,59.2%,.1);
  }

  .recommended-books .book-item {
    padding: 15px;
    overflow: hidden;
    margin-bottom: 0;
  }

  .recommended-authors, .recommended-books {
      border-radius: 2px;
      overflow: hidden;
      background: #fff;
      margin-bottom: 20px;
      font-size: 13px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }

  .recommended-books .book-item a {
    display: block;
    overflow: hidden;
  }

  .recommended-books .book-item-info {
    float: left;
    width: 148px;
    margin-left: 10px;
    text-align: left;
  }

  .recommended-books .book-item-title {
    color: #333;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 5px;
  }

  .book-item-buycount {
    color: #878c90;
    float: left;
    height: 20px;
    line-height: 20px;
  }

  .try-read {
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 2px;
    background-color: #007fff;
    float: right;
  }

  *, :after, :before {
      box-sizing: border-box;
  }

  .recommended-books .book-item-img {
    float: left;
    width: 52px;
    height: 72px;
  }

.project-list {
  .card-title {
    font-size: 0;

    a {
      color: rgba(0, 0, 0, 0.85);
      margin-left: 12px;
      line-height: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;

      &:hover {
        color: #1890ff;
      }
    }
  }
  .card-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }
  .project-item {
    display: flex;
    margin-top: 8px;
    overflow: hidden;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    a {
      color: rgba(0, 0, 0, 0.45);
      display: inline-block;
      flex: 1 1 0;

      &:hover {
        color: #1890ff;
      }
    }
    .datetime {
      color: rgba(0, 0, 0, 0.25);
      flex: 0 0 auto;
      float: right;
    }
  }
  .ant-card-meta-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;
  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.members {
  a {
    display: block;
    margin: 12px 0;
    line-height: 24px;
    height: 24px;
    .member {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      line-height: 24px;
      max-width: 100px;
      vertical-align: top;
      margin-left: 12px;
      transition: all 0.3s;
      display: inline-block;
    }
    &:hover {
      span {
        color: #1890ff;
      }
    }
  }
}

.mobile {
  .project-list {
    .project-card-grid {
      width: 100%;
    }
  }

  .more-info {
    border: 0;
    padding-top: 16px;
    margin: 16px 0 16px;
  }

  .headerContent .title .welcome-text {
    display: none;
  }
}
.v-note-wrapper {
  position: relative;
  min-width: 300px;
  min-height: 300px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  z-index: 0;
  text-align: left;
  border: 1px solid #f2fbfc;
  border-radius: 4px;
}

.result {
  text-align: center;
  width: 72%;
  margin: 0 auto;
  padding: 24px 0 8px;

  .icon {
    font-size: 72px;
    line-height: 72px;
    margin-bottom: 24px;
  }
  .success {
    color: #52c41a;
  }
  .error {
    color: red;
  }
  .title {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 16px;
  }
  .description {
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 24px;
  }
  .content {
    background: #fafafa;
    padding: 24px 40px;
    border-radius: 2px;
    text-align: left;
  }
  .action {
    margin-top: 32px;
  }
}

.mobile {
  .result {
    width: 100%;
    margin: 0 auto;
    padding: unset;
  }
}

</style>
